<template>
	<div class="coupon">
		<div class="header">
			<div class="back-icon iconfont">
				&#xe624;
			</div>
			<div class="title">优惠券管理</div>
		</div>
		<div class="coupon-warp">
			<div class="coupon-title">已添加的优惠券/代金券</div>
		</div>
		<div class="content" ref="coupon">
			<div>
				<div class="content-item">				
					<div class="item-left">
						<div class="img-warrp">
							<img width="100%" height="100%" src="../../assets/images/functions/youhuiquan.png" alt="" />
						</div>
						<div class="item-info">
							<div class="item-title">摄影摄像指定商品</div>
							<div class="price-warrp">
								<span class="price">30</span>
								<span class="hot">满100可用</span>
							</div>
						</div>
						<div class="top-cir"></div>
						<div class="bottom-cir"></div>
					</div>
					<div class="item-right">
						<div class="progress">
							<x-circle 
								:stroke-color="lineColor" 
								:trail-color="lineBgColor"
								:stroke-width="3"
								:trail-width="1"
								:percent="percent"
							></x-circle>
							<div class="progress-text">
								<div class="title">被领</div>
								<div class="text">{{percent}}%</div>
							</div>
						</div>
						<div class="item-btn">152人领取</div>
					</div>
				</div>
				<div class="content-item">				
					<div class="item-left">
						<div class="img-warrp">
							<img width="100%" height="100%" src="../../assets/images/functions/youhuiquan.png" alt="" />
						</div>
						<div class="item-info">
							<div class="item-title">摄影摄像指定商品</div>
							<div class="price-warrp">
								<span class="price">30</span>
								<span class="hot">满100可用</span>
							</div>
						</div>
						<div class="top-cir"></div>
						<div class="bottom-cir"></div>
					</div>
					<div class="item-right">
						<div class="progress">
							<x-circle 
								:stroke-color="lineColor" 
								:trail-color="lineBgColor"
								:stroke-width="3"
								:trail-width="1"
								:percent="percent"
							></x-circle>
							<div class="progress-text">
								<div class="title">被领</div>
								<div class="text">{{percent}}%</div>
							</div>
						</div>
						<div class="item-btn">152人领取</div>
					</div>
				</div>
				<div class="content-item">				
					<div class="item-left">
						<div class="img-warrp">
							<img width="100%" height="100%" src="../../assets/images/functions/youhuiquan.png" alt="" />
						</div>
						<div class="item-info">
							<div class="item-title">摄影摄像指定商品</div>
							<div class="price-warrp">
								<span class="price">30</span>
								<span class="hot">满100可用</span>
							</div>
						</div>
						<div class="top-cir"></div>
						<div class="bottom-cir"></div>
					</div>
					<div class="item-right">
						<div class="progress">
							<x-circle 
								:stroke-color="lineColor" 
								:trail-color="lineBgColor"
								:stroke-width="3"
								:trail-width="1"
								:percent="percent"
							></x-circle>
							<div class="progress-text">
								<div class="title">被领</div>
								<div class="text">{{percent}}%</div>
							</div>
						</div>
						<div class="item-btn">152人领取</div>
					</div>
				</div>
				<div class="content-item">				
					<div class="item-left">
						<div class="img-warrp">
							<img width="100%" height="100%" src="../../assets/images/functions/youhuiquan.png" alt="" />
						</div>
						<div class="item-info">
							<div class="item-title">摄影摄像指定商品</div>
							<div class="price-warrp">
								<span class="price">30</span>
								<span class="hot">满100可用</span>
							</div>
						</div>
						<div class="top-cir"></div>
						<div class="bottom-cir"></div>
					</div>
					<div class="item-right">
						<div class="progress">
							<x-circle 
								:stroke-color="lineColor" 
								:trail-color="lineBgColor"
								:stroke-width="3"
								:trail-width="1"
								:percent="percent"
							></x-circle>
							<div class="progress-text">
								<div class="title">被领</div>
								<div class="text">{{percent}}%</div>
							</div>
						</div>
						<div class="item-btn">152人领取</div>
					</div>
				</div>
				<div class="content-item">				
					<div class="item-left">
						<div class="img-warrp">
							<img width="100%" height="100%" src="../../assets/images/functions/youhuiquan.png" alt="" />
						</div>
						<div class="item-info">
							<div class="item-title">摄影摄像指定商品</div>
							<div class="price-warrp">
								<span class="price">30</span>
								<span class="hot">满100可用</span>
							</div>
						</div>
						<div class="top-cir"></div>
						<div class="bottom-cir"></div>
					</div>
					<div class="item-right">
						<div class="progress">
							<x-circle 
								:stroke-color="lineColor" 
								:trail-color="lineBgColor"
								:stroke-width="3"
								:trail-width="1"
								:percent="percent"
							></x-circle>
							<div class="progress-text">
								<div class="title">被领</div>
								<div class="text">{{percent}}%</div>
							</div>
						</div>
						<div class="item-btn">152人领取</div>
					</div>
				</div>
				<div class="content-item">				
					<div class="item-left">
						<div class="img-warrp">
							<img width="100%" height="100%" src="../../assets/images/functions/youhuiquan.png" alt="" />
						</div>
						<div class="item-info">
							<div class="item-title">摄影摄像指定商品</div>
							<div class="price-warrp">
								<span class="price">30</span>
								<span class="hot">满100可用</span>
							</div>
						</div>
						<div class="top-cir"></div>
						<div class="bottom-cir"></div>
					</div>
					<div class="item-right">
						<div class="progress">
							<x-circle 
								:stroke-color="lineColor" 
								:trail-color="lineBgColor"
								:stroke-width="3"
								:trail-width="1"
								:percent="percent"
							></x-circle>
							<div class="progress-text">
								<div class="title">被领</div>
								<div class="text">{{percent}}%</div>
							</div>
						</div>
						<div class="item-btn">152人领取</div>
					</div>
				</div>
			</div>
		</div>
		<div class="confirm-btn">添加优惠券</div>
	</div>
</template>

<script type="text/javascript">
	import { XCircle } from 'vux'
	import BScroll from 'better-scroll'
	export default{
		name : 'coupon',
		data(){
			return{
				lineColor:"#ff1351",
				lineBgColor:"#ccc",
				percent:56
			}
		},
		mounted(){
			this.BScroll = new BScroll(this.$refs.coupon)
		},
		components:{
			XCircle
		}

	}
</script>
<style lang="less" scoped>
	@comColor:#ff1351;
	.coupon{
		text-align: left;
		.header{
			position: relative;
			display:flex;
			height:.9rem;
			line-height: .9rem;
			color:#fff;
			background:@comColor;
			font-size:.34rem;		
			.back-icon{
				position: absolute;
				left: 0;
				top: 0;
				height: .9rem;
				padding:0 .2rem;
			}
			.title{
				flex:1;
				text-align: center;
			}
		}
		.coupon-warp{
			overflow: hidden;
			height: 1.16rem;
			background: #fff;
			.coupon-title{
				height: .36rem;
				line-height: .36rem;
				padding-left: .2rem;
				margin-left: .3rem;
				margin-top: .4rem;
				border-left: .1rem solid @comColor;
				background: #fff;
			}	
		}
		.content{
			position: absolute;
			top: 2.26rem;
			left: 0;
			right: 0;
			bottom: 1.25rem;
			overflow: hidden;
			padding: 0 .18rem;
			background: #efeff4;
			.content-item{
				display: flex;
				height: 2rem;
				margin-bottom: .18rem;
				background:#fff;
				border-radius:.08rem;
				.item-left{
					position: relative;
					flex: 1;
					border-right: 0.01rem dashed #efeff4;
					.img-warrp{
						display: inline-block;
						margin-left: .25rem;
						margin-top: .25rem;
						height: 1.5rem;
						width: 1.5rem;
					}
					.top-cir,.bottom-cir{
						position: absolute;
						right: -.12rem;
						width: .25rem;
						height: .25rem;
						background: #efeff4;
						border-radius: 50%;
					}
					.top-cir{
						top: -.12rem;
					}
					.bottom-cir{
						bottom: -.12rem;
					}
					.item-info{
						vertical-align: top;
						display: inline-block;
						height: 100%;
						margin-left: .3rem;
						font-size: .24rem;
						.item-title{
							margin: .25rem 0;
							line-height: .7rem;
						}
						.price-warrp{
							.price,.hot{
								display: inline-block;
							}
							.price{
								vertical-align: middle;
								font-size: .45rem;
								color: @comColor;
							}
							.hot{								
								min-width: 1.4rem;
								padding: 0 .15rem;
								height: .4rem;
								line-height: .4rem;
								text-align: center;
								background: #fff4eb;
								color: @comColor;
							}
						}
					}
				}
				.item-right{
					width: 1.5rem;
					.progress{
						position: relative;
						margin: .2rem auto;
						width: 1rem;
						height: .9rem;
						.progress-text{
							position: absolute;												
							top: 50%;
							left: 50%;
							width: .62rem;
							font-size: .2rem;
							margin-left: -.31rem;
							margin-top: -.31rem;
							color: @comColor;
							.title,.text{
								
								text-align: center;
								line-height: .36rem;
							}
						}
					}
					.item-btn{
						margin:0 auto;						
						width: 1.3rem;
						height: .4rem;
						line-height: .4rem;
						text-align: center;	
						background: @comColor;	
						color: #fff;	
						border-radius: .2rem;
						font-size: .18rem;		
					}
				}
			}
		}
		.confirm-btn{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 1.25rem;
			background: #ff1351;
			font-size: .4rem;
			text-align: center;
			line-height: 1.25rem;
			color: #fff;
		}
	}
</style>